import Head from 'next/head'
import Image from 'next/image'
import styles from './index.module.scss'
import { InferGetStaticPropsType } from 'next'

export default function Home(
  props: InferGetStaticPropsType<typeof getStaticProps>
) {
  return (
    <>
      <Head>
        <title>My Todos</title>
        <meta name='description' content='构建一个 SSR Todos' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className={styles.main}></main>
    </>
  )
}

/**
 * （静态生成）：指定基于数据预呈现页面的动态路由。
 */
// export async function getStaticPaths():GetStaticPaths {
//   const list = await (await fetch('http://localhost:5000/list')).json()

//   return {
//     props: {
//       list
//     }
//   }
// }

import { request } from '@/api'

/**
 * （静态生成）：在构建时获取数据。
 */
export async function getStaticProps() {
  // 调用外部 API 获取博文列表
  // const list: any[] = await (
  //   await fetch('http://localhost:3000/api/people')
  // ).json()
  const [e, r] = await request({
    url: '/api/people'
  })
  console.log('e ===>   ', e)
  console.log('r ===>   ', r)
  // const list: any[] = []

  // 通过返回 { props: { posts } } 对象，Blog 组件
  // 在构建时将接收到 `posts` 参数
  return {
    props: {
      list: r
    }
  }
}

/**
 * （Server-side Rendering）：获取每个请求的数据。
 */
// export async function getServerSideProps() {
//   // Fetch data from external API
//   const res = await fetch(`http://localhost:5000/list`)
//   const list: any[] = await res.json()

//   // Pass data to the page via props
//   return { props: { list } }
// }
